<template>
  <div class="DivisionalManagement">
    <Title :title='depment'></Title>
    <div class="div-header">
      <div>
        <el-input
          style="width: 200px"
          v-model="name"
          placeholder="请输入部门名称"
        ></el-input>
        <el-button type="primary" @click="souFun">查询</el-button>
        <el-button type="primary" @click="chongFun">重置</el-button>
      </div>
      <div>
        <el-button type="primary" @click="addFun">新增部门</el-button>
      </div>
    </div>
    <el-table  :data="tableData" style="width: 100%">
      <el-table-column fixed='left' prop="deptName" label="部门名称" width="180">
      </el-table-column>
      <el-table-column prop="userName" label="部门领导" width="180">
        <template  #default="scope">{{scope.row.userName}}</template>
      </el-table-column>
      <el-table-column prop="nickName" label="部门成员" width="180">
        <template  #default="scope">{{scope.row.nickName}}</template>
      </el-table-column>
      <el-table-column prop="job" label="成员岗位" width="180">
        <template  #default="scope">{{scope.row.job}}</template>
      </el-table-column>
      <el-table-column prop="state" label="在职状态" width="180">
        <template  #default="scope">{{scope.row.state==0?'离职':scope.row.state==1?'在职':'试用期'}}</template> 
      </el-table-column>
      <el-table-column prop="lastLoginTime" label="创建时间" width="180">
        <template  #default="scope">
          {{$filters.currencyUSD(scope.row.createTimes)}}
        </template>
      </el-table-column>
      <el-table-column prop="lastLoginTime" label="修改时间" width="180">
        <template  #default="scope">
          {{$filters.currencyUSD(scope.row.updateTimes)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="limit"
      prev-text='上一页'
      next-text='下一页'
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <Mack :form='form' @formFun='formFun'></Mack>
  </div>
</template>
<script>
import {ref} from "vue";
import Title from '../../components/title.vue'
import {depentlist} from '../../api/user'
import Mack from '../../components/depmentAddlist.vue'
export default {
  components:{
    Mack,
    Title
  },
  data() {
    return {
      depment:'部门管理',
      tableData: [],
      form: {
        dialogFormVisible: false,
        title:'',
        deptName:'',
        userId: "",
      },
      depan: [],
      formLabelWidth: "120px",
      page:1,
      limit:3,
      total:0,
      name:''
    };
  },
  methods: {
    // 编辑
    handleClick(row) {
      let arr={...row}
      console.log(arr);
      this.form.title='编辑部门'
      this.form.dialogFormVisible=true
      this.form.deptName=arr.deptName
      this.form.userId = arr.userName;
    },
    // 返回的数据
    formFun(val){
      this.form.dialogFormVisible=val
      this.listFun()
    },
    // 下拉选择部门
    seletFun(val){
      this.form.deptId=val._id
    },
    //下拉选择状态
    seletFun1(val){
      this.form.state=val.value
    },
    //点击页码
    handleCurrentChange(val) {
      this.page=val
      this.listFun()
    },
    // 添加用户
    addFun() {
      this.form.dialogFormVisible = true;
      this.form.title='添加部门'
      this.form.deptName=''
      this.form.userId =''
    },
    // 搜索数据
    souFun(){
      this.listFun()
    },
    // 重置
    chongFun(){
      this.name=''
      this.listFun()
    },
    // 获取数据
    listFun(){
      depentlist({page:this.page,limit:this.limit,deptName:this.name}).then((res)=>{
        if(res.status==200){
          console.log(res.data);
          this.tableData=res.data
          this.total=res.count
        }
      })
    },
  },
  created() {
    this.listFun()
  },
  setup() {
    return {
      input: ref(""),
    };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/scss.scss';
.DivisionalManagement {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  .header {
    width: 100%;
    height: 30px;
    border-left: $border-left;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .div-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>